<template>
  <div>
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="视频" name="video">
          <el-table :data="dataList" style="width: 100%">
            <el-table-column label="商品名称">
              <template slot-scope="scope">
                <img :src="scope.row.courseAvatar" alt width="70" height="70" />
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="售价(元)" prop="price"></el-table-column>
            <el-table-column label="身份类型  一级分销比例（%）">
              <template slot-scope="scope">
                <p>合伙人：{{scope.row.hehuoren}}%</p>
                <p>运营中心：{{scope.row.yunyingzhongxin}}%</p>
                <p>分公司：{{scope.row.fengongsi}}%</p>
                <p>vip：{{scope.row.huiyuan}}%</p>
              </template>
            </el-table-column>
            <el-table-column label="收益人比例（%）" prop="shouyiren"></el-table-column>
            <el-table-column label="收益人姓名" prop="nickName"></el-table-column>
            <!-- <el-table-column label="vip折扣" prop="vipzhekou"></el-table-column> -->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="setScale(scope.row)">比例设置</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="currentPage"
            :total="total"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="音频" name="voice">
          <el-table :data="dataList" style="width: 100%">
            <el-table-column label="商品名称">
              <template slot-scope="scope">
                <img :src="scope.row.courseAvatar" alt width="70" height="70" />
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="售价(元)" prop="price"></el-table-column>
            <el-table-column label="身份类型  一级分销比例（%）">
              <template slot-scope="scope">
                <p>合伙人：{{scope.row.hehuoren}}%</p>
                <p>运营中心：{{scope.row.yunyingzhongxin}}%</p>
                <p>分公司：{{scope.row.fengongsi}}%</p>
                <p>vip：{{scope.row.huiyuan}}%</p>
              </template>
            </el-table-column>
            <el-table-column label="收益人比例（%）" prop="shouyiren"></el-table-column>
            <el-table-column label="收益人姓名" prop="nickName"></el-table-column>
            <!-- <el-table-column label="vip折扣" prop="vipzhekou"></el-table-column> -->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="setScale(scope.row)">比例设置</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="currentPage"
            :total="total"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="图文" name="img">
          <el-table :data="dataList" style="width: 100%">
            <el-table-column label="商品名称">
              <template slot-scope="scope">
                <img :src="scope.row.courseAvatar" alt width="70" height="70" />
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="售价(元)" prop="price"></el-table-column>
            <el-table-column label="身份类型  一级分销比例（%）">
              <template slot-scope="scope">
                <p>合伙人：{{scope.row.hehuoren}}%</p>
                <p>运营中心：{{scope.row.yunyingzhongxin}}%</p>
                <p>分公司：{{scope.row.fengongsi}}%</p>
                <p>vip：{{scope.row.huiyuan}}%</p>
              </template>
            </el-table-column>
            <el-table-column label="收益人比例（%）" prop="shouyiren"></el-table-column>
            <el-table-column label="收益人姓名" prop="nickName"></el-table-column>
            <!-- <el-table-column label="vip折扣" prop="vipzhekou"></el-table-column> -->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="setScale(scope.row)">比例设置</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="currentPage"
            :total="total"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="专栏" name="cloum">
          <el-table :data="dataList" style="width: 100%">
            <el-table-column label="商品名称">
              <template slot-scope="scope">
                <img :src="scope.row.avatar" alt width="70" height="70" />
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="原价(元)" prop="price"></el-table-column>
            <el-table-column label="售价（元）" prop="ColumnPrice"></el-table-column>
            <el-table-column label="身份类型  一级分销比例（%）">
              <template slot-scope="scope">
                <p>合伙人：{{scope.row.hehuoren}}%</p>
                <p>运营中心：{{scope.row.yunyingzhongxin}}%</p>
                <p>分公司：{{scope.row.fengongsi}}%</p>
                <p>vip：{{scope.row.huiyuan}}%</p>
              </template>
            </el-table-column>
            <!-- <el-table-column label="vip折扣" prop="vipzhekou"></el-table-column> -->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="setScale(scope.row)">比例设置</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="currentPage"
            :total="total"
          ></el-pagination>
        </el-tab-pane>
        <!-- <el-tab-pane label="资料" name="first"></el-tab-pane> -->
      </el-tabs>
    </el-card>

    <el-dialog title="比例设置" :visible.sync="isShowScale">
      <el-form :model="aloneScale">
        <el-form-item label="比例设置：">
          <el-radio-group v-model="aloneScale.type">
            <el-radio :label="1">采用统一抽成比例</el-radio>
            <el-radio :label="2">采用单独设置抽成比例</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row v-if="aloneScale.type == 1">
          <el-col>
            <el-form :model="unifiedScale" label-width="230px">
              <el-form-item label="vip一级抽成比例（%）：">{{unifiedScale.buyCourseL1Ratio}}%</el-form-item>
              <!-- <el-form-item label="vip折扣：">{{unifiedScale.buyDiscount}}%</el-form-item> -->
              <el-form-item label="合伙人一级抽成比例（%）：">{{unifiedScale.partnerDiscount}}%</el-form-item>
              <el-form-item label="运营中心一级抽成比例（%）：">{{unifiedScale.runDiscount}}%</el-form-item>
              <el-form-item label="分公司一级抽成比例（%）：">{{unifiedScale.companyDiscount}}%</el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row v-if="aloneScale.type == 2">
          <el-col>
            <el-form :model="aloneScale" label-width="200px">
              <el-form-item label="vip一级抽成比例（%）：">
                <el-input-number
                  v-model="aloneScale.huiyuan"
                  :min="0"
                  :max="99"
                  style="width:100px"
                  controls-position="right"
                ></el-input-number>%
              </el-form-item>
              <!-- <el-form-item label="vip折扣：">
                <el-input-number
                  v-model="aloneScale.vipzhekou"
                  :min="0"
                  :max="10"
                  style="width:100px"
                  controls-position="right"
                ></el-input-number>% -->
              </el-form-item>
              <el-form-item label="合伙人一级分销比例：">
                <el-input-number
                  v-model="aloneScale.hehuoren"
                  :min="0"
                  :max="99"
                  style="width:100px"
                  controls-position="right"
                ></el-input-number>%
              </el-form-item>
              <el-form-item label="运营中心一级分销比例：">
                <el-input-number
                  v-model="aloneScale.yunyingzhongxin"
                  :min="0"
                  :max="99"
                  style="width:100px"
                  controls-position="right"
                ></el-input-number>%
              </el-form-item>
              <el-form-item label="分公司一级分销比例：">
                <el-input-number
                  v-model="aloneScale.fengongsi"
                  :min="0"
                  :max="99"
                  style="width:100px"
                  controls-position="right"
                ></el-input-number>%
              </el-form-item>
              <el-form-item label="是否关联收益人：" v-if="cloumSetScale">
                <el-radio-group v-model="aloneScale.is">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="活动区域" v-if="aloneScale.is == 1">
                <el-select v-model="aloneScale.id" placeholder="选择收益人：">
                  <el-option
                    v-for="(item,index) in teacherList"
                    :key="index"
                    :value="item.userId"
                    :label="item.nickname"
                  >{{item.nickname}}</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="收益人抽成比例(%)" v-if="aloneScale.is == 1">
                <el-input-number
                  v-model="aloneScale.Commission"
                  :min="0"
                  :max="99"
                  style="width:100px"
                  controls-position="right"
                ></el-input-number>%
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowScale = false">取 消</el-button>
        <el-button type="primary" @click="submitScale()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  GoodsUnificationList,
  GoodsUnification,
  proportion
} from "@/api/member";
export default {
  data() {
    return {
      activeName: "video",
      dataList: [],
      isShowScale: false,
      aloneScale: {
        type: 1, //1统一设置 2 单独设置
        is: 0
      },
      teacherList: [],
      cloumSetScale: true,
      unifiedScale: {},
      total: null,
      currentPage:null
    };
  },
  watch: {
    activeName(val) {
      this.cloumSetScale = true;
      if (val == "video") {
        this.getCourse(2, 0);
      } else if (val == "voice") {
        this.getCourse(2, 1);
      } else if (val == "img") {
        this.getCourse(2, 2);
      } else if (val == "cloum") {
        this.getCourse(2, 4);
        this.cloumSetScale = false;
      }
    },
    currentPage(val){
      console.log(val);
      
      if (this.activeName == "video") {
        this.getCourse(2, 0,val);
      }else if(this.activeName == "voice"){
        this.getCourse(2, 1,val);
      }else if(this.activeName == "img"){
        this.getCourse(2, 2,val);
      }else if(this.activeName == "cloum"){
        this.getCourse(2, 4,val);
      }
    }
  },
  methods: {
    setScale(val) {
      this.isShowScale = true;
      this.getUnifiedScale();
      if (this.activeName == "cloum") {
        this.aloneScale = {
          huiyuan: Number(val.huiyuan),
          vipzhekou: Number(val.vipzhekou),
          hehuoren: Number(val.hehuoren),
          yunyingzhongxin: Number(val.yunyingzhongxin),
          fengongsi: Number(val.fengongsi),
          type: 1,
          is: 0,
          catId: Number(val.catId)
        };
      } else {
        this.aloneScale = {
          huiyuan: Number(val.huiyuan),
          vipzhekou: Number(val.vipzhekou),
          hehuoren: Number(val.hehuoren),
          yunyingzhongxin: Number(val.yunyingzhongxin),
          fengongsi: Number(val.fengongsi),
          type: 1,
          is: 0,
          courseId: Number(val.courseId)
        };
      }
    },
    getUnifiedScale() {
      proportion().then(res => {
        var data = res.data.data;
        this.unifiedScale = {
          buyCourseL1Ratio: data.buyCourseL1Ratio,
          buyDiscount: data.buyDiscount,
          partnerDiscount: data.partnerDiscount,
          runDiscount: data.runDiscount,
          companyDiscount: data.companyDiscount
        };
      });
    },
    submitScale() {
      GoodsUnification(this.aloneScale).then(res => {
        this.$message(res.data.data);
      });
      this.aloneScale = { type: 1, is: 0 };
      if (this.activeName == "video") {
        this.getCourse(2, 0);
      } else if (this.activeName == "voice") {
        this.getCourse(2, 1);
      } else if (this.activeName == "img") {
        this.getCourse(2, 2);
      } else if (this.activeName == "cloum") {
        this.getCourse(2, 4);
      }
      this.isShowScale = false;
    },
    getCourse(level, courseType, page) {
      let data = {
        level: level, //1是商品 2是课程
        courseType: courseType,
        page: page
      };
      GoodsUnificationList(data).then(res => {
        this.dataList = res.data.data.data.data;
        this.teacherList = res.data.data.user;
        this.total = res.data.data.data.total;
      });
    }
  },
  mounted() {
    this.getCourse(2, 0);
  }
};
</script>
<style scoped>
</style>
